<template>
    <el-form :model="form" :rules="rules" ref="addUserForm" class="user-form">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="form.username" style="width: 200px;"></el-input>
      </el-form-item>
      <el-form-item label="真实姓名" prop="realName">
        <el-input v-model="form.realName" style="width: 200px;"></el-input>
      </el-form-item>
      <el-form-item label="用户角色" prop="role">
        <el-select v-model="form.role" placeholder="请选择" style="width: 200px;">
            <el-option label="管理员" value="管理员"></el-option>
        <el-option label="员工" value="员工"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="form.email" style="width: 200px;"></el-input>
      </el-form-item>
      <el-form-item label="电话" prop="phone">
        <el-input v-model="form.phone" style="width: 200px;"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('addUserForm')">提交</el-button>
        <el-button @click="resetForm('addUserForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </template>
  
  <script setup>
import { ref, reactive, onMounted } from 'vue';
import { ElMessage } from 'element-plus';

const form = reactive({
  username: '',
  realName: '',
  role: '',
  email: '',
  phone: ''
});

const rules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
  ],
  realName: [
    { required: true, message: '请输入真实姓名', trigger: 'blur' },
    { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
  ],
  role: [
    { required: true, message: '请选择用户角色', trigger: 'change' }
  ],
  email: [
    { type: 'email', required: true, message: '请输入正确的邮箱地址', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入电话', trigger: 'blur' },
    { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的电话号码', trigger: 'blur' }
  ]
};

const addUserForm = ref(null);

const submitForm = (formName) => {
  addUserForm.value.validate((valid) => {
    if (valid) {
      // 添加新用户的逻辑
      console.log('提交的用户信息:', form);
      // 在这里添加将新用户信息添加到用户列表的逻辑
      // 例如，将新用户信息添加到this.users数组
      // this.users.push(form);
      ElMessage.success('用户添加成功！');
      // 重置表单
      resetForm(formName);
    } else {
      console.log('error submit!!');
      return false;
    }
  });
};

const resetForm = (formName) => {
  addUserForm.value.resetFields();
};
</script>

<style>
/* 自定义样式 */
.user-form {
  height: 100%; /* 确保容器的高度与父元素el-main相同 */
  width: 100%; /* 设置表单宽度为100%，使其充满容器 */
}


.form-group {
  margin: 20px;
}

.input-field {
  width: 25%;
  padding: 10px;
}

.button-container {
  display: flex;
  justify-content: center;
}

.submit-button {
  background-color: blue;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}

.reset-button {
  background-color: gray;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}

</style>